<template>
	<div class="c-wrap">
		<div class="c-header">
			<p class="text-title flex align-center">
				<span>消息通知</span>
				<el-date-picker class="date-box"
					v-model="countYears"
					:editable="false"
					:clearable="false"
					type="month"
					placeholder="选择统计年月"
					value-format="YYYY-MM"
					@change="getInitData"
				>
					<template #default="cell">
						<div class="cell" :class="{ current: cell.isCurrent }">
							<span style="font-size: 33px" class="f20 mr8 text-bold">{{ cell.text }}</span>
						</div>
					</template>
				</el-date-picker>
			</p>
		</div>
		<main class="c-main">
			<ApldTable class="mt10 self-table" v-bind="tableConfig" :data="tableData">
				<template v-slot:Region="{ row }">
					<el-tag color="#0052d9" :dark="true" effect="dark" @click="handleMenuClick(row)">{{ row.Region }}</el-tag>
				</template>
				<template v-slot:menu="{ row }">
					<el-button type="primary" plain @click="handleMenuClick(row)" size="small">查看</el-button>
				</template>
			</ApldTable>
		</main>

		<el-drawer size="85%" append-to-body v-model="drawer" :with-header="false">
			<infoIntegrity v-bind="paramsObj" :countYear="countYears" v-if="drawer"></infoIntegrity>
		</el-drawer>
	</div>
</template>

<script setup lang="ts">
import { ApldTable } from '@/components/AplidCrud'
import { onMounted } from 'vue'
import apiMod from '@/apiMod/index'
import infoIntegrity from '../areaNotify/index.vue'

const getNowDate = () => {
	const y = new Date().getFullYear()
	const m = new Date().getMonth() +1 ||1
	return `${y}-${m >= 10 ? m : '0' + m}`
}

const drawer = ref(false)
const paramsObj = ref({})
const countYears = ref(getNowDate())
const tableConfig = {
	showIndex: false,
	columns: [
		{
			label: '地区',
			prop: 'Region',
			align: 'left',
		},
		{
			label: '更新通知数量',
			prop: 'total',
			align: 'center',
		},
		{
			label: '已更新数量',
			prop: 'changeNum',
			align: 'center',
		},
		{
			label: '完成度',
			prop: 'rate',
			align: 'center',
		},
		{
			label: '操作',
			prop: 'menu',
			fixed: 'right',
			align: 'center',
		},
	],
}

const tableData = ref([])

const getInitData = () => {
	tableData.value = []
	apiMod
		.view_dpSubsidyStatistics_notice_statistics({
			countYears: countYears.value,
		})
		.then((res) => {
			const data = res.data
			tableData.value = data
		})
}

const handleMenuClick = (row) => {
	paramsObj.value = {
		RegionId: row.RegionId,
		organizationNum: row.organizationNum,
		Region: row.Region,
	}
	drawer.value = true
	// router.push({
	//   path:'/datacenter/infoIntegrity/areaIntegrity/index',
	//   query:{
	//     RegionId:row.RegionId,
	//     organizationNum:row.organizationNum,
	//     Region:row.Region,
	//   }
	// })
}
onMounted(() => {
	getInitData()
})
</script>

<style scoped lang="scss">
:deep(.date-box>.el-input__wrapper) {
	box-shadow: none;
	background-color: transparent;
}
.c-wrap {
	width: 100%;
	.c-header {
		padding: 5% 20%;
	}
	.c-main {
		padding: 5% 10%;
		background-color: #fff;
		.self-table {
			margin: 0 auto;
			border: 1px solid #dcdcdc;
			border-radius: 10px 10px 0 0;
		}
	}
}
.text-title {
	font-family: 'Microsoft YaHei Bold';
	font-weight: 700;
	font-size: 16px;
	text-align: left;
	color: #0052d9;
}
</style>
